<template>
  <!--充值-->
	<div id="app" class="backf4">
    <loading v-if="loading"></loading>
    <div v-else>
      <!--充值-->
      <div v-if="way == 3" class="my-withdraw my-withdrawdpt">
          <!--滑动盒子-->
          <div class="my-swiper">
              <!--宝宝账户-->
              <div class="my-card my-card1" :class="{'my-card2' : moneytype == 3}">
                  <div class="my-top">
                      <div class="item1" v-if="moneytype == 1">我的余额</div>
                      <div class="item1" v-if="moneytype == 2">我的音符</div>
                  </div>
                  <p class="my-money" v-if="moneytype == 1"><span class="money-icon">￥</span>{{ mymoneyInfo.money || 0 }}</p>
                  <p class="my-money" v-if="moneytype == 2"><span class="money-icon"></span>{{ mymoneyInfo.diamonds || 0 }}</p>
                  <div class="my-top">
                      <div class="item2" @click="goListPage">充值记录</div>
                  </div>                  
              </div>
              <!--余额充值-->
              <!--选择充值方式-->
              <div class="withdraw-mypay" v-if="moneytype == 1">
                  <div class="my-looklist">
                      <div class="item1">输入充值金额</div>
                      <div class="item2">
                          <span>￥</span>
                          <input type="tel" placeholder="请输入整数金额" v-model="payMoney">                      
                      </div>
                  </div>
                  <div class="change-pay">
                      <div class="alipay">
                          <span class="pay1">支付宝支付</span>
                          <span class="pay2" @click="changePayway(1)">
                              <img v-if="payWay == 1" src="../../../assets/img/pay_type_icon_active.png" alt="">
                              <img v-if="payWay != 1" src="../../../assets/img/w12.png" alt="">
                          </span>
                      </div>
                      <div class="wechpay">
                          <span class="pay1">微信支付</span>
                          <span class="pay2" @click="changePayway(2)">
                              <img v-if="payWay == 2" src="../../../assets/img/pay_type_icon_active.png" alt="">
                              <!--选中-->
                              <img v-if="payWay != 2" src="../../../assets/img/w12.png" alt="">
                          </span>
                      </div>
                  </div>
              </div>
              <!--钻石的充值方式-->
              <div class="diamond-pay" v-if="moneytype == 2">
                  <div class="money-list">
                      <p class="title-p" style="padding: 0 0 .3rem .2rem;">选择充值金额</p>
                      <div class="item1" :class="{'on':index == selected}" v-for="(item,index) in diamondsList" @click="selectDeiad(index,item.money)">
                          <img class="diamond-img" src="../../../assets/img/say03.png" alt="">
                          <span  class="icon" v-text="'￥'+item.money"></span>
                          <p class="money-text">x{{ item.shop_diamonds || item.diamond }}</p>
                      </div>
                  </div>
                  <div class="agree" style="margin-top: .3rem;color: #666;">
                      <span class="check-icon" :class="{'check-icon-on':isAgree == true}" @click="getAgree"></span>
                      我已阅读并同意 
                      <span class="user-agree">
                          <a :href="reUrl" style="color: #000;">《用户充值协议》</a>
                      </span>
                  </div>
                  <!--钻石充值弹框-->
                  <div v-if="isShowD" class="diamond-box">
                      <div class="change-pay diamond-layer">
                            <p>选择充值方式</p>
                            <span class="delete-icon" @click="isShpwdiamd"></span>
                            <div class="moneypay">
                                <!--先影藏，不删-->
                                <!--<i class="money-icon1"></i>-->
                                <span class="pay1">余额支付</span>
                                <span class="pay2" @click="changePayway(3)">
                                    <img v-if="payWay == 3" src="../../../assets/img/pay_type_icon_active.png" alt="">
                                    <img v-if="payWay != 3" src="../../../assets/img/w12.png" alt="">
                                </span>
                                <!--先隐藏，不删-->
                                <!--<span class="icon-money">SAY HI支付，最高减免188</span>-->
                            </div>
                            <div class="alipay">
                                <span class="pay1">支付宝支付</span>
                                <span class="pay2" @click="changePayway(1)">
                                    <img v-if="payWay == 1" src="../../../assets/img/pay_type_icon_active.png" alt="">
                                    <img v-if="payWay != 1" src="../../../assets/img/w12.png" alt="">
                                </span>
                            </div>
                            <div class="wechpay">
                                <span class="pay1">微信支付</span>
                                <span class="pay2" @click="changePayway(2)">
                                    <img v-if="payWay == 2" src="../../../assets/img/pay_type_icon_active.png" alt="">
                                    <!--选中-->
                                    <img v-if="payWay != 2" src="../../../assets/img/w12.png" alt="">
                                </span>
                            </div>
                      </div>
                      <div class="layer"></div>
                      <div class="my-btn" style="z-index: 2;" @click="paytodiamond">确认充值</div>
                  </div>
              </div>
              <!--余额充值按钮-->
              <div class="my-btn" v-if="moneytype != 2" @click="paytoMoney">确认充值</div>
              <!--钻石充值按钮-->
              <div class="my-btn" v-if="moneytype == 2" @click="isShpwdiamd">确认充值</div>
          </div>
      </div>
      <!--转音符或者提现-->
		  <div v-if="way != 3" class="my-withdraw my-withdrawdpt">
          <!--滑动盒子-->
          <div class="my-swiper">
              <!--余额操作-->
              <div class="my-card my-card1" v-if="moneytype == 1">
                  <div class="my-top">
                      <div class="item1">我的余额</div>
                  </div>
                  <p class="my-money" style="margin-top: .55rem;"><span class="money-icon">￥</span>{{ mymoneyInfo.money || 0 }}</p>
                  <div class="my-top">
                      <div class="item2" v-text="listText" @click="goListPage">查看记录</div>
                  </div>
              </div>
              <!--声贝操作-->
              <div class="my-card my-card3" v-if="moneytype == 3">
                  <div class="my-top">
                      <div class="item1">我的声贝</div>
                  </div>
                  <p class="my-money" style="margin-top: .55rem;"><span class="money-icon">￥</span>{{ mymoneyInfo.charm || 0 }}</p>
                  <div class="my-top">
                      <div class="item2" v-text="listText" @click="goListPage">查看记录</div>
                  </div>
              </div>
              <div class="change-diamond">
                 <!--输入的钱-->
                 <div class="my-looklist my-looklist1" style="border-bottom: 1px solid #E6E6E6;padding-bottom:.2rem;">
                     <p class="title-p" v-text="wayText">声贝转音符</p>
                     <div>
                         <input type="tel" :placeholder="inputtext" v-model="tixianMoney" @input="controlInputMoney(tixianMoney)">                      
                     </div>
                 </div>
                 <!--提现手续费和实际到账金额-->
                 <div class="ratio-box" v-if="way == 1">
                     <!--提现手续费-->
                     <p class="item1">手续费:
                         <span v-if="withdrawInfo.withdrawal_ratio" v-text="withdrawInfo.withdrawal_ratio+'%'">5%</span>
                         <span v-if="!withdrawInfo.withdrawal_ratio">0</span>
                     </p>
                     <!--提现-->
                     <p class="item2">
                         实际到账金额:￥
                         <span class="money-big" v-if="moneytype == 1" v-text="actualMoney">0</span>
                         <span class="money-big" v-if="moneytype == 3" v-text="(actualMoney/100).toFixed(2)">0</span>
                         元
                     </p>
                 </div>
                 <!--转钻石手续费和实际到账金额-->
                 <div class="ratio-box" v-if="way == 2">
                     <!--提现手续费-->
                     <p class="item1">手续费:
                         <span v-if="exchageInfo.exchange_ratio" v-text="exchageInfo.exchange_ratio+'%'">5%</span>
                         <span v-if="!exchageInfo.exchange_ratio">0</span>
                     </p>
                     <!--转为钻石-->
                     <p class="item2">实际到账音符:￥
                         <span class="money-big" v-if="moneytype == 1" v-text="actualMoney*100 || 0"></span>
                         <span class="money-big" v-if="moneytype == 3" v-text="actualMoney || 0"></span>
                         音符
                     </p>
                 </div>
              </div>
              <!--提现或者转为钻石-->
              <p class="withtext-info" v-if="way == 1">转出根据系统延迟情况需要1-5个工作日</p>
              <div class="my-btn" v-text="wayTextbtn" @click="getwithdraw">提交</div>              
          </div>
      </div>
      <!--输入密码框-->
      <div class="putpaws-box" v-if="showpwasbox">
          <div class="putpaws">
              <span class="delete" @click="isShowpwasbox"></span>
              <p>请输入交易密码</p>
              <div class="input-box" style="position: relative;">
                  <div class="pawsbox">
                      <span :class="{'on' : this.pawStr1[0]}">{{ this.pawStr1[0] | getpaw }}</span>
                      <span :class="{'on' : this.pawStr1[1]}">{{ this.pawStr1[1] | getpaw }}</span>
                      <span :class="{'on' : this.pawStr1[2]}">{{ this.pawStr1[2] | getpaw }}</span>
                      <span :class="{'on' : this.pawStr1[3]}">{{ this.pawStr1[3] | getpaw }}</span>
                      <span :class="{'on' : this.pawStr1[4]}">{{ this.pawStr1[4] | getpaw }}</span>
                      <span :class="{'on' : this.pawStr1[53]}">{{ this.pawStr1[5] | getpaw }}</span>
                  </div>
                  <input class="paypaw-box" type="tel" v-model="paypaws"  @input.stop='controlFirstNumber(paypaws)'>
              </div>
          </div>
          <div class="put-layer"></div>
      </div>
    </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import Loading from "components/loading.vue"
    export default {
      data() {
        return {
          reUrl:'',
          payMoney:'',
          loading:true,
        	webname:5464,
          inputtext:'请输入转为钻石的金额', //输入框默认提示
          wayText:'转为钻石',
          listText:'查看记录',
          wayTextbtn:'提交', //按钮上的字
    		  moneytype:'',//账户类型  type 1,账户，2-钻石，3-魅力值 
          way:'',//操作类型    way=,1-提现，2=转钻石，3-充值
          account:'',
          sliders:'',
          isShowD:false,
          isAgree:true, //同意用户充值协议
          isSetpass:1, //是否设置支付密码
          payWay:1,//1==支付宝支付，2==微信支付
          mymoneyInfo:'',
          tixianMoney:'',//输入的提现
          withdrawInfo:'', //提现信息
          exchageInfo:'',  //转换钻石信息
          actualMoney:0, //实际到账金额
          actualDiamods:0, //实际到账钻石
          pawStr1:[], //密码段
          password1:'',//密码
          showpwasbox:false,
          diamondsList:[],
          selected:0,
          toDiamMoney:'',
          paypaws:''  //支付密码
          //this.pawStr1 = this.password1.split('');
        }
      },
      //实例初始化最之前，无法获取到data里的数据
      beforeCreate(){
      	
      	
      },  
      //在挂载开始之前被调用
      beforeMount(){
      	
      
      }, 
      //已成功挂载，相当ready()
      mounted(){
          this.showpwasbox = false;
          this.actualMoney = 0;
          this.pawStr1 = [];
          this.paypaws = '';
          this.password1 = "";
          this.payMoney = '';
          this.isAgree = true;
          this.isShowD = false;
          
          this.moneytype = parseInt(common.getQueryString('moneytype'));
          this.way = parseInt(common.getQueryString('way'));
          
          if(this.moneytype == 1){
              this.payWay = 1;
          }

          if(this.moneytype == 2){
              this.payWay = 3;
          }

          if(this.way == 1){

              this.wayTextbtn = "提交";
              this.listText = "提现记录";
              if(this.moneytype == 1){
                  this.wayText = '余额提现';
                  $('title').text('余额提现');
                  this.inputtext = '请输入提现金额（必须是100的倍数）';
              }
              if(this.moneytype == 3){
                  this.wayText = '声贝提现';
                  $('title').text('声贝提现');
                  this.inputtext = '请输入提现声贝（必须是100的倍数）';
              }
          }

          if(this.way == 2){

              this.wayTextbtn = "确认转出";
              this.listText = "支出记录";

              if(this.moneytype == 1){
                  this.inputtext = '请输入转为音符的余额';
                  this.wayText = '余额转音符';
              }
              if(this.moneytype == 3){
                  this.inputtext = '请输入转为音符的声贝';
                  this.wayText = '声贝转音符';
              }
              $('title').text('转为音符');
          }

          if(this.way == 3){
              if(this.moneytype == 1){
                  $('title').text('余额充值');
              }
              if(this.moneytype == 2){
                  $('title').text('音符充值');
              }
          }
          
          console.log(this.moneytype+'=='+this.way);
          
          //支付
          window["payFun"] = (result)=>{
              if(this.platform == 'ios'){
                  gopay(JSON.stringify(result));
              }else{
                  window.user.gopay(JSON.stringify(result));
              }
          }

          //支付成功后刷新
          window["getRechargeResult"] = ()=>{
              this.loadgetUser();
          }
          this.getUserInfo();
      },
      components:{Loading},
      //相关操作事件
      methods: {
          //发起支付
          payFun(res){
              window.payFun(res);
          },
          //余额充值协议
          rechargeUrl(){
              common.ajax({
                  url:'api/recharge/mine',
                  type:'GET'
              }).then(res=>{
                  this.reUrl = res.data.url;
              })
          },
          //余额充值
          rechargeMoney(){
              var type = "";
              if(this.payWay == 1){
                  type = 'alipay_app';
              }

              if(this.payWay == 2){
                 type = 'weixin_app';
              }            
              common.ajax({
                  url:'api/recharge/money',
                  type:'POST',
                  data:{
                     money: parseInt(this.payMoney),
                     payment_type:type
                  }
              }).then(res=>{
                  this.payFun(res.data);
              })
          },
          //钻石充值
          rechargeDiamd(){
              var type = "";
              if(this.payWay == 1){
                  type = 'alipay_app';
              }

              if(this.payWay == 2){
                 type = 'weixin_app';
              }
              common.ajax({
                  url:'api/recharge/diamond',
                  type:'POST',
                  data:{
                    payment_type:type,
                    money:parseInt(this.toDiamMoney)
                  }
              }).then(res=>{
                  this.payFun(res.data);
              })
          },          
          //跳记录列表页
          goListPage(){
              window.location.href = '/views/looklist/index.html?moneytype='+this.moneytype+'&way='+this.way+"&h5=true";              
          },
          //钻石充值时选择金额
          selectDeiad(index,money){
              if(this.selected != index){
                  this.selected = index;
                  this.toDiamMoney = money;
              }
          },
          //输入密码
          controlFirstNumber(num){
              if(num.length > 0){
                  this.pawStr1 = num.split('');
                  if(num.length == 6){
                      this.checkSubmit(num);
                  }
              }
              if(num.length == 0){
                  this.pawStr1 = [];
              }
          },
          //输入金额
          controlInputMoney(num){
                if(this.way == 2){
                    //转到钻石
                    this.actualMoney = num-(num*((this.exchageInfo.exchange_ratio/100) || 0));
                }else{
                    //提现到账金额
                    this.actualMoney = num-(num*((this.withdrawInfo.withdrawal_ratio/100) || 0));
                }
          },
          //是否设置密码 
          basicinfo(){ 
              if(this.isSetpass == 1){
                  //此处打开密码输入框 
                  this.isShowpwasbox();
              }else{
                  //去设置密码
                  window.location.href = '/views/setpaypass/index.html?moneytype='+this.moneytype+'&way='+this.way+"&h5=true"+'&money='+this.tixianMoney;
              }             
          },
          //检查密码输入
          checkSubmit(num){
              common.ajax({
                  url:"api/check/password",
                  type:'POST',
                  data:{
                      password:num
                  }
              }).then(res=>{
                  this.paypaws = "";
                  this.pawStr1 = [];
                  //成功进行提现操作
                  this.isShowpwasbox();  //关闭密码框
                  //提现
                  if(this.way == 1){
                      this.getwithdrawApi();
                  }
                  if(this.way == 2){
                      this.exchange();
                  }

              }).catch(error=>{    
                  this.paypaws = "";               
                  this.pawStr1 = [];
              })
          },
          //展现输入密码框
          isShowpwasbox(){
              this.showpwasbox = !this.showpwasbox;
              this.paypaws = "";               
              this.pawStr1 = [];
          },
          //点击按钮
          getwithdraw(){
              if(this.tixianMoney > parseInt(this.withdrawInfo.money)){
                  common.errMessage('余额不足');
              }else if(this.tixianMoney == 0 || !this.tixianMoney){
                  common.errMessage('请输入金额');
              }else{
                  //检查是否设置密码
                  this.basicinfo();
              }
          },
          //提现接口
          getwithdrawApi(){
              var type= '';
              if(this.moneytype == 1){
                  type = 'money';
              }

              if(this.moneytype == 3){
                  type = 'charm';
              }
              common.ajax({
                  type:'POST',
                  url:'api/user/withdrawals',
                  data:{
                     charm_money_num:this.tixianMoney,
                     currency:type
                  }
              }).then(res=>{
                  this.getwithdrawInfo();
                  this.loadgetUser();
                  common.errMessage(res.info);
              })             
          },
          //转换钻石
          exchange(){
              var type = "";
              var money = 0;
              if(this.moneytype == 1){
                  type = 'money';
                  money = this.tixianMoney;
              }
              if(this.moneytype == 3){
                  type = 'charm';
                  money = this.tixianMoney;
              } 
              //钻石充值时若选择余额支付 
              if(this.moneytype == 2){
                  type = 'money';
                  money = this.toDiamMoney;
              }

              common.ajax({
                  type:'POST',
                  url:"api/currency/exchang",
                  data:{
                      exchang_currency:type,
                      currency:'diamonds',
                      currency_number:money,
                      currency_str:type+'_to_diamonds'
                  }
              }).then(res=>{
                  //刷新魅力值
                  if(this.moneytype != 2){
                      this.getwithdrawInfo();
                  }
                  this.loadgetUser();
                  common.errMessage(res.info);
              })
          },          
          //同意用户协议
          getAgree:function(){
              this.isAgree = !this.isAgree;
          },
          //钻石充值弹框
          isShpwdiamd:function(){
              if(!this.isAgree){
                  common.errMessage('同意用户充值协议才能充值');
              }else{
                  this.isShowD = !this.isShowD;
              }
          },
          //选择支付方式
          changePayway:function(type){
             this.payWay = type;
          },
          //点击钻石充值按钮
          paytodiamond(){
              if(this.payWay == 3){
                  //如果选择的余额支付
                  this.exchange();
              }else{
                  this.rechargeDiamd();
              }
          },
          //点击充值余额按钮
          paytoMoney(){
              if(this.payMoney > 0){
                  this.rechargeMoney();
              }else{
                  common.errMessage('充值金额不能为空');
              }
          },
          //提现情况接口
          getwithdrawInfo:function(){
              var moneytype = '';
              if(this.moneytype == 1){
                  moneytype = 'money';
              }
              if(this.moneytype == 3){
                  moneytype = 'charm';
              }

              common.ajax({
                  type:'get',
                  url:'api/user/withdrawaldata?currency='+moneytype
              }).then(res=>{
                  this.withdrawInfo = res.data;
              })
          },
          //转换钻石情况
          getExchageInfo(){
              var moneytype = '';
              if(this.moneytype == 1){
                  moneytype = 'money';
              }
              if(this.moneytype == 3){
                  moneytype = 'charm';
              }

              common.ajax({
                  type:'get',
                  url:'api/user/currencyexchangerate?exchang_currency='+moneytype+'&currency=diamonds'
              }).then(res=>{
                  this.exchageInfo = res.data;
              })              
          },
          //获取当前钻石和是否设置支付密码
          getUserInfo:function(){
              common.ajax({
                  type:'get',
                  url:'api/user/getuserinfo'
              }).then(res=>{
                  this.loading = false;
                  this.mymoneyInfo = res.data;
                  this.isSetpass = res.data.is_set_password;
                  //提现手续费
                  if(this.way == 1){
                      this.getwithdrawInfo();
                  }

                  //转钻石时候的手续费
                  if(this.way == 2){
                      this.getExchageInfo();
                  }
                  
                  if(this.way == 3){
                      this.rechargeUrl();
                  }
                  if(this.moneytype == 2 && this.way ==3){
                      this.getDiamList();
                  }

              })
          },
          //充值后刷新数据
          loadgetUser(){
              common.ajax({
                  type:'get',
                  url:'api/user/getuserinfo'
              }).then(res=>{
                  this.mymoneyInfo = res.data;
              })            
          },
          //获取充值钻石列表
          getDiamList:function(){
              common.ajax({
                  type:'POST',
                  url:'api/rechargediamond/data'
              }).then(res=>{
                  this.diamondsList = res.data.recharge_data;
                  this.toDiamMoney = res.data.recharge_data[0].money;
                  this.selected = 0;
              })
          },
          getRechargeResult:function(){
            window.getRechargeResult();
          }          
      },
      filters:{
          getpaw:function(num){
              if(num){
                  return '*'
              }
          }
      }              
    }
</script>

